<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除和修改采购人</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<body>
		<fieldset class="table-search-fieldset">
		    <legend>搜索信息</legend>
				<div style="margin: 10px 10px 10px 10px">
					<!-- 查询框 -->
					<form class="layui-form layui-form-pane layui-inline" style="width: 600px;">
						<div class="layui-inline">
							<label class="layui-form-label">采购人姓名</label>
							<div class="layui-input-block">
							  <input type="text" name="buyerName" lay-verify="required" placeholder="请输入采购人姓名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit=""  lay-filter="demo1">查询</button>
							</div>
						</div>
					</form>
				</div>
		</fieldset>
		
		<table class="layui-hide" id="test" lay-filter="test"></table>
		
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加</button>
		  </div>
		</script>
		
		<!-- 操作栏 -->
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<script src="js/jquery-3.4.1.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['table','form'], function(){
				  var table = layui.table,
				  form=layui.form,
				  $=layui.jquery;
				  
				  tableIn = table.render({
					elem: '#test'
					,url:'http://localhost:8081/query/queryBuyerByName'
					,toolbar: '#toolbarDemo'
					,title: '采购人信息表'
					,id:'buyerTable'
					,cols: [[
					  {field:'buyerId', title:'采购人编号', width:200, fixed: 'left', unresize: true}
					  ,{field:'buyerName', title:'采购人姓名'}
					  ,{field:'buyerPhone', title:'采购人电话'}
					  ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:120}
					]]
					,page: true
				  });
				  
				  // 监听搜索操作
				  form.on('submit(demo1)', function (data) {
					  // layer.alert(JSON.stringify(data.field), {
					  //   title: '最终的提交信息'
					  // });
				  
						//执行搜索重载
						table.reload('buyerTable', {
							page: {
								curr: 1
							}
							, where: {
								buyerName : data.field.buyerName
							}
						}, 'data');
						            
					  return false;
				  });
				  
				  //添加事件监听
				  table.on('toolbar(test)', function (obj) {
					  if(obj.event==='add'){
						  // layer.alert(111);
						  var index = layer.open({
						  	title: '添加采购人',
						  	type: 2,
						  	shade: 0.2,
						  	maxmin:true,
						  	shadeClose: true,
						  	area: ['50%', '50%'],
						  	content: './addBuyer.html'
						  });
					  }
				  });
				  
				  //修改和删除事件监听
				  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				    // layer.alert(111)
					var data = obj.data //获得当前行数据
					,event=obj.event;
					// layer.alert(data.medId);
					if(event==='modify'){
						// layer.alert(111)
						var index = layer.open({
							title: '修改药厂信息',
							type: 2,
							shade: 0.2,
							maxmin:true,
							shadeClose: true,
							area: ['50%', '50%'],
							content: './modifyBuyer.html',
							success: function(layero, index){
								var body = layui.layer.getChildFrame('body', index);
								 body.find("#buyerId").val(data.buyerId);
								 body.find("#buyerName").val(data.buyerName);
								 body.find("#buyerPhone").val(data.buyerPhone);
							}	
						});
					}else if(event==='del'){
						// alert(1111);
						layer.confirm('你确定删除吗？', function(index){
							 //obj.del(); //删除对应行（tr）的DOM结构
							 layer.close(index);
							 //console.log(data.id)
							 //向服务端发送删除指令
							 $.ajax({
							 	type:"post",
							 	url:"http://localhost:8081/user/deleteBuyer",
							 	async:true,
							 	contentType:"application/json;charset=UTF-8",
							 	data:JSON.stringify(data),
							 	xhrFields: {
							 		withCredentials: true
							 	},
							 	success:function(res){
							 		// $('input').val("");
							 		//sessionStorage.setItem("userName",res.data);
							 		console.log(res);
							 		layer.msg(res.msg);
									tableIn.reload();
							 	}
							 });
						 });
					}
				  });
				});
		</script>
	</body>
</html>
